<template>
	<el-row>
		<el-col :span="8" :offset="8">
			<div class="hello">
				<el-row>
					<el-col :span="20" :offset="0">
						<div class="PipelineOperatorLogin">
							管理员登录
						</div>
						<div class="grid-content bg-purple">
							<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
								class="demo-ruleForm">
								<el-form-item prop="username">
									<el-input v-model="ruleForm.username" placeholder="管理员账户" prefix-icon="el-icon-user"></el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input type="password" v-model="ruleForm.password" autocomplete="off"
										show-password  placeholder="管理员密码"prefix-icon="el-icon-lock"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm')"
										style="width: 100%;border: 0px;">立即登录</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div class="administrators">
							<p>超级管理员用户名: admin123 超级管理员用户名：admin123</p>
							<p>商城管理员用户名: mall123 商城管理员用户名：mall123</p>
							<p>推广管理员用户名: promotion123 推广管理员用户名：promotion123</p>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('管理员账户不允许为空'));
				}
				setTimeout(() => {
					if (!(/^[a-zA-Z0-9_\u4E00-\u9FA5][a-zA-Z0-9_\u4E00-\u9FA5]{3,15}$/).test(value)) {
						callback(new Error('管理员账户错误'));
					} else {
						callback();
					}
				}, 1000);
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('管理员密码不允许为空'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			return {
				ruleForm: {
					password: '',
					username: ''
				},
				rules: {
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					username: [{
						validator: checkAge,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			init() {
				this.axios.post(`/api/auth/login?`, {
					username: this.ruleForm.username,
					password: this.ruleForm.password,
				}).then(res => {
					// console.log(res, 123123123)
					// window.sessionStorage.setItem('token',headers)
					// console.log(res.data.data.token)
					sessionStorage.setItem('token', res.data.data.token)
					if (res.data.data.token) {
						this.$router.push({
							path: "/index"
						})
					}
				})
			},


			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.init()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		height: 100%;
		background-color: #2D3A4B;
		
		.hello {
			width: 700px;
			height: 300px;
			margin: 40% auto;

			.PipelineOperatorLogin {
				width: 700px;
				color: #EEEEEE;
				font-size: 25px;
				font-weight: 800;
				margin-bottom: 20px;
				line-height: 50px;
				text-align: center;
			}
			.administrators{
				color: #FFFFFF;
				font-size: 14px;
				margin-left: 100px;
			}
		}
	}
	
</style>
<style>
	.el-input__inner{
		    background-color: #283443 !important;
			padding-left: 35px !important;
			caret-color: #FFFFFF !important;
			color: #FFFFFF !important;
			border: 0 !important;
	}
	/* $cursor:#cc1650;
	@supports(-webkit-mask:none) and (not(cater-color:$cursor)) {
		.el-input__inner{
			color: $cursor;
		}
	} */
</style>
